<template>
  <el-drawer
    :append-to-body="true"
    title="审批人设置"
    :visible.sync="approverDrawer"
    direction="rtl"
    class="set_promoter"
    size="550px"
    :before-close="saveApprover"
  >
    <div class="demo-drawer__content">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="审批人" name="1">
          <div class="drawer_content">
            <div class="approver_content">
              <div>
                <el-radio v-model="setType" label="1">指定角色</el-radio>
              </div>
              <div>
                <el-button type="primary" @click="addRoleApprover"
                  >添加/修改成员</el-button
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作权限" name="2">
          <div class="drawer_permission">
            <!-- 同意 -->
            <div class="drawer_permission_item">
              <div class="permission_item_left">
                <svg-icon class="icon" icon-class="agree" />
                <div>
                  <div class="text_first">同意</div>
                  <div class="text_second">审批通过，流转到下一节点</div>
                </div>
              </div>
              <div class="permission_item_right">
                <el-switch v-model="processPermission.complete"> </el-switch>
              </div>
            </div>
            <!-- 拒绝 -->
            <div class="drawer_permission_item">
              <div class="permission_item_left">
                <svg-icon class="icon" icon-class="reject" />
                <div>
                  <div class="text_first">拒绝</div>
                  <div class="text_second">
                    当拒绝任务时，当前任务被终止，并结束整个流程
                  </div>
                </div>
              </div>
              <div class="permission_item_right">
                <el-switch v-model="processPermission.refuse"> </el-switch>
              </div>
            </div>
            <!-- 退会 -->
            <div class="drawer_permission_item">
              <div class="permission_item_left">
                <svg-icon class="icon" icon-class="back" />
                <div>
                  <div class="text_first">退回</div>
                  <div class="text_second">
                    若审批内容存在问题，当前任务将中止并回退至特定历史任务节点
                  </div>
                </div>
              </div>
              <div class="permission_item_right">
                <el-switch v-model="processPermission.back"> </el-switch>
              </div>
            </div>
            <!-- 委派 -->
            <!-- <div class="drawer_permission_item">
              <div class="permission_item_left">
                <svg-icon class="icon" icon-class="delegate" />
                <div>
                  <div class="text_first">委派</div>
                  <div class="text_second">
                    将当前任务暂时交由他人处理，待其完成后再交回自己处理
                  </div>
                </div>
              </div>
              <div class="permission_item_right">
                <el-switch v-model="processPermission.delegate"> </el-switch>
              </div>
            </div> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="表单权限" name="3">
          <div class="process_permission">
            <div class="title">字段：</div>
            <el-radio-group size="medium" v-model="form_radio">
              <el-radio label="仅读"></el-radio>
              <el-radio label="必填"></el-radio>
              <el-radio label="隐藏"></el-radio>
            </el-radio-group>
          </div>
        </el-tab-pane>
      </el-tabs>
      <role-dialog
        :visible.sync="approverRoleVisible"
        @updateRoleList="updateRoleList"
      />
    </div>
  </el-drawer>
</template>
<script>
import roleDialog from "../dialog/roleDialog.vue";
import { mapState } from "vuex";
const type = {
  readonly: "仅读",
  required: "必填",
  hidden: "隐藏",
};

export default {
  components: { roleDialog },
  data() {
    return {
      approverRoleVisible: false,
      activeName: "1",
      setType: "1",
      //操作权限
      processPermission: {
        complete: true,
        refuse: true,
        back: true,
        // delegate: true,
      },
      form_radio: "仅读", //表单权限
      roleList: [],
    };
  },
  computed: {
    ...mapState({
      approverDrawer: (state) => state.workflow.approverDrawer,
      nodeId: (state) => state.workflow.nodeId,
    }),
    formPermissionCheck() {
      if (this.form_radio === "仅读") {
        return "readonly";
      } else if (this.form_radio === "必填") {
        return "required";
      } else if (this.form_radio === "隐藏") {
        return "hidden";
      }
    },
  },
  watch: {
    approverDrawer(val) {
      if (val) {
        this.processPermission = { ...this.$store.state.workflow.operations };
        this.form_radio = type[this.$store.state.workflow.formPermission];
        this.roleList = [...this.$store.state.workflow.roleList];
      }
    },
  },
  methods: {
    addRoleApprover() {
      this.approverRoleVisible = true;
    },
    sureRoleApprover() {
      this.approverRoleVisible = false;
    },
    saveApprover() {
      this.approverRoleVisible = false; //确保抽屉关闭时dailog关闭
      this.closeDrawer();
    },

    closeDrawer() {
      this.$store.commit("workflow/setApproverDrawer", false);
      this.$store.dispatch("workflow/updateNode", {
        Permission: this.processPermission,
        formPermission: this.formPermissionCheck,
        roleList: this.roleList,
        roles: [...this.roleList.map((e) => e.roleId), "1"],
      });
    },
    updateRoleList(list) {
      this.roleList = list;
    },
  },

  mounted() {},
};
</script>
<style lang="scss" scoped>
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  .approver_self_select .el-button,
  .approver_content .el-button {
    margin-bottom: 20px;
  }

  .approver_content .el-radio,
  .approver_some .el-radio,
  .approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 20px;
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
  .drawer_permission {
    .drawer_permission_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      padding: 25px 10px;
      .permission_item_left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon {
          background-color: #409eff;
          border-radius: 5px;
          height: 40px;
          width: 40px;
          margin: 0 10px;
        }
        .text_first {
          font-weight: bold;
          font-size: 14px;
        }
        .text_second {
          color: #a8abb2;
        }
      }
    }
  }
  .process_permission {
    padding: 10px;
    display: flex;
    font-size: 14px;
    align-items: center;
    .title {
      color: #909399;
      font-weight: bold;
    }
  }
}
</style>
